<template>
  <div id="rootgoods-main">
    <div class="countdown">
        <div class="countdown-left">
            <div class="price">￥4999</div>
            <div class="reserve">订金:￥100</div>
        </div>
        <div class="countdown-right">
            <div class="count-word">距结束还剩</div>
            <div class="count-time">
              <van-count-down :time="time">
  <template #default="timeData">
    <span class="block">{{ timeData.hours}}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.minutes}}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.seconds}}</span>
  </template>
</van-count-down>
            </div>
        </div>
    </div>
    <div class="title">【订金】荣耀MagicBook 14 2022 14英寸笔记本
电脑i5-12500H Windows 11家庭版16GB 512G .
B(星空灰)</div>
<div class="double1">[双11巅峰预订]①预订直降500元②积分膨胀抵现(尾
款)
③预订限量赠荣耀耳机④支付抽免单!</div>
<div class="flow">
    <div>购买流程: 1.支付订金 2.支付尾款 3.等待发货</div>
    <div>支付订金: 2022.11.08 00:00 ~ 2022.11.10 19:59</div>
    <div>支付尾款: 2022.11.10 20:00 ~ 2022.11.11 23:59</div>
</div>
<div class="get-coupon">
    <div class="title-left">领券</div><div class="get-center">满10减10</div><div class="get-right">免息券</div>
</div>
<div class="promotion">
    <div class="title-left">促销</div>
    <div class="promotion-right">
        <div class="promotion-right-top">
            <div class="right-top1 title-blue">限时特价</div>
            <span class="content">双11直降200元</span>
        </div>
        <div class="promotion-right-center">
            <div class="center1 title-blue">一站式换新</div>
            <span class="content">以旧换新赢4999元优惠券补贴</span>
        </div>
    </div>
</div>
<div class="color">
    <div class="title-left">颜色</div>
    <div class="color-picture">
        <img src="https://hshop.honorfile.com/pimages//product/6936520810581/428_428_8BFF51598821C9E883CA068F50F3A6CDD791F4FD3C6EBC26mp.png" alt="">
        <div class="color-kinds">星空灰</div>
    </div>
</div>
<div class="num">
    <div class="title-left">数量</div>
    <div class="num-button">
    <van-stepper v-model="value" />
    </div>
</div>
<div class="send">
    <div class="title-left">送至</div>
    <div class="send-details">
        <div class="location"> <span>陕西</span>&nbsp; &nbsp;<span>西安市</span>&nbsp;&nbsp; <span>莲湖区</span></div>
    </div>
</div>
<div class="service">
    <div class="title-left">服务</div>
    <div class="service-list">        
        <div class="list-one">
            <div class="check"></div> 
            <span>已满0元包邮.</span>
        </div>
        <div class="list-one">
            <div class="check"></div>
            <span>由荣耀终端负责发货，并提供售后咨询服务</span> 
        </div>
        <div class="list-one">
            <div class="check"></div>
            <span>退换货免运费</span> 
        </div>       
    </div>
    <div class="more"></div>
    </div>

  </div>
</template>

<script>
export default {
    data() {
      return {
         value: 1,
         time:12*60*60*1000
    };
  },
   methods: {
    onChange(index) {
      Toast('当前 Swipe 索引：' + index);
    },
  },
}
</script>

<style scoped>
.countdown{
    width: 100%;
    height: 3.25rem;
    display: flex;
}
.countdown-left{
    width: 70%;
    height: 100%;
    background:-webkit-linear-gradient(left, #ff3950, #fe3699);
}
.price{
    font-size:16px ;
    font-weight:700 ;
    color: white;
    margin: .625rem 0 .125rem .625rem;
}
.reserve{
    font-size:12px ;
    font-weight:700 ;
    color: white;
    margin-left: .725rem;
}
.countdown-right{
    width: 30%;
    height: 100%;
    background-color: rgb(243, 212, 217);
}
.count-word{
    margin-left: .9625rem;
    font-size:14px ;
    color: #fe3699;
    margin-top: .1375rem;
}
.count-time{
    margin-left: .5625rem;
    margin-top: .4375rem;
}
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #fe3699;
  }
.block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color:#fe3699;
  }
.title{
    margin: .625rem;
    font-weight: 700;
}
.double1{
    font-size:.75rem ;
    color: red;
    margin-left: 1.25rem;
}
.flow{
    font-size:.805rem ;
    margin: .5375rem 0 0 1.25rem;
}
.promotion,.get-coupon,.color{
    display: flex;
    margin-top:1.25rem ;
}
.title-left{
    font-size:.8125rem ;
    margin-left: .9375rem;
    font-weight:700 ;
    width: 1.875rem;
}
.get-center{
    margin:0  1.25rem 0  1.25rem;
}
.get-right,.get-center{
    background: url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon_coupon_new_1.png)no-repeat;
    background-size:5.125rem ;
    color: #ff3950;
    font-size:.75rem ;
}
.promotion-right-top,.promotion-right-center{
    display: flex;
}
.title-blue{
    font-size:.75rem ;
    border: .0625rem solid blue;
    text-align: center;
    color: blue;
    border-radius:.625rem ;
    height: 1.25rem;
    font-size:.75rem ;
}
.right-top1{
    width: 3.8375rem;
    margin:0 .625rem;
}
.promotion-right-center{
    margin-top: .3125rem;
}
.content{
    font-size: .775rem;
}
.center1{
    width:4.5375rem ;
    margin:0 .625rem;
}
.color-picture{
    width: 4.8125rem;
    height: 6.625rem;
    border: .0625rem solid blue;
    border-radius:.4375rem;
    margin-left: 1.25rem;
}
 .color-picture img{
    width: 3.5rem;
    height: 3.5rem;
    margin: .5125rem;
 }
 .color-kinds{
    font-size:.875rem ;
    text-align: center;
 }
 .num{
    display: flex;
    margin-top: 1.25rem;
 }
 .num-button{
    display: flex;
    margin: -0.3125rem 0 0 1.25rem;
 }
 .btn-add,.btn-reduce{
    width: 1.675rem;
    height: 1.675rem;
    border-radius:.8375rem ;
    border: 1px solid rgb(174, 172, 172);
 }
 .shopping-num{
    margin: .3125rem ;
 }
 .send{
    display: flex;
    margin-top: .9375rem;
 }
 .send-details{
    margin-left: 1.25rem;
 }
 .location{
    font-size: .805rem;
 }
 .service{
    margin-top: 1.25rem;
    display: flex;
    height: 9.25rem;
 }
 .service-list{
   height: .7813rem;
   width: 70%;
 }
 .check{
    width: .7813rem;
    height: .7813rem;
    background: url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon_discount_blue.png) no-repeat ;
    background-size: .7813rem .7813rem;
 }
 .service-list{
    margin-left: 1.25rem;
 }
 .list-one{
    display: flex;
    margin-bottom:.625rem;
 }
  .list-one span{
    font-size: .75rem;
    margin-left: .3125rem;
  }
 .more{
    background:url(https://hshop.honorfile.com/nwap/221030101/images/echannelWap/icon/icon-more-right.png)no-repeat;
    background-size:1.5625rem;
    width: 1.5625rem;
    height: 1.5625rem;
 }
</style>